<template>
  <div>
    <el-upload action="" ref="upload" :limit="limit" :http-request="uploadImg" accept="image/jpeg,image/png" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :file-list="fileList" :on-exceed="onExceed" >
      <i class="el-icon-plus"></i>
    </el-upload>

    <el-dialog ref="preview" :visible.sync="dialogVisible" append-to-body>
                <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
/* eslint-disable */
import { successMsg, errorMsg } from "@/util/message"
import { isNull } from "@/util/util";
import { uploadUrl } from '@/config/env'

export default {
  name: 'upload',
  props: ['limit','fileList','resultImages'],
  components: {
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
    }
  },
  watch: {},
  mounted() { },
  computed: {
    result () {
       let urls = this.fileList.map(item => {
                return item.url
       })
       return urls.join(',')
    }
  },
  methods: {
    uploadImg(f) {
      let param = new FormData();
      param.append('file', f.file);
      this.$store
        .dispatch("UploadImage", param)
        .then(
          res => {
            if (res.data.status == 1) {
              successMsg(this, '上传成功')
              this.fileList.push({
                url: res.data.result.data.pathUrl
              })
            }
            else {
              errorMsg(this, '上传错误')
              console.log(this.fileList)
            }
          }, error => {
            errorMsg(this, '上传失败')
              console.log(this.fileList)

          })
    },
     handleRemove(file, fileList) {
       this.fileList.splice(this.fileList.indexOf(file))
    },
        // 缩略图预览
    handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
    },
    onExceed(files, fileList){
        return errorMsg(this, '超过最大限制上传数')
    },
  }
};
</script>